<template>
	<div>
		<el-form>
			<div class="container">
				<h3>原料信息</h3>
				<el-table
				    :data="ruleForm.materialList"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="breedName" sortable label="品名"></el-table-column>
				    <el-table-column prop="batch" sortable label="批号"></el-table-column>
				    <el-table-column prop="type" sortable label="来源"></el-table-column>
				    <el-table-column prop="place" sortable label="地块/供应商"></el-table-column>
				    <el-table-column sortable label="数量"> 
				        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
				    </el-table-column>
				  
				</el-table>
			</div>
			<div class="container" style="margin-top:20px;">
				<h3>加工信息</h3>
				<el-form-item label="加工工艺" style="margin-top:20px;">
					{{ruleForm.detailList[0].technology}}
				</el-form-item>
				<div class="addtend" v-for="(s,index) in ruleForm.technologyList" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
				    <div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.methodName}}</div>
				    <el-form-item label="加工时间">
					    {{s.beginTime}}至{{s.endTime}}
				    </el-form-item>
				    <el-form-item label="负责人">
						{{s.principalName}}
						<el-button type="danger" round size="mini"  style="float: right;margin-right:20px;">查看监控</el-button>
						
				    </el-form-item>
				    <img :src="$store.state.imageUrls + s.processImg" alt="" style="width:300px;height:130px;">
				</div>
			</div>
			<div class="container" style="margin-top:20px;">
				<h3>成品信息</h3>
				<el-table
				    :data="ruleForm.detailList"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="productName" sortable label="品名"></el-table-column>
				    <el-table-column prop="batch" sortable label="批号"></el-table-column>
				    <el-table-column prop="grade" sortable label="品级"></el-table-column>
				    <!-- <el-table-column prop="place" sortable label="地块/供应商"></el-table-column> -->
				    <el-table-column sortable label="成品数量"> 
				        <template slot-scope="scope">{{scope.row.surplusNumber}}{{scope.row.units}}</template>
				    </el-table-column>
					<el-table-column sortable label="关联介绍">
						 <template slot-scope="scope">
							 <span v-if="scope.row.productId != '' && scope.row.productId != null">已关联</span>
							 <el-button type="text" v-else>关联</el-button>
						 </template>
					</el-table-column>
				</el-table>
			</div>
			<el-form>
			    <el-form-item class="footerFixed">
			       
			        <el-button @click="backPage">返回</el-button>
			    </el-form-item>
			</el-form>
		</el-form>
	</div>
</template>

<script>
	import { process_findById } from "@/request/api.js"
	export default {
		data(){
			return{
				id:'',
				ruleForm:{}
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			backPage(){
				this.$router.go(-1)
			},
			init(){
				process_findById(this.id).then((res)=>{
					this.ruleForm = res.data
				})
			}
			
		}
	}
</script>

<style scoped="scoped">
	.addtend{
	    display:inline-block;
	    width: 300px;
	    margin-left:20px;
	    /* margin:20px; */
	    height:250px;
		border: 1px solid #999;
		
	    /* line-height:200px;
	    text-align: center; */
	    background:#fff;
	}
</style>